<template>
  <!-- 案件列表弹窗 -->
  <el-dialog
    title="案件列表"
    append-to-body
    :close-on-click-modal="false"
    :modal="false"
    top="6rem"
    custom-class="el-dragable-dialog default-on-right"
    v-el-drag-dialog
    :visible.sync="showCaseListDialog"
  >
    <div class="a-case-list" v-loading="caseListLoading">
      <ul class="p10 m`0 p0">
        <li
          class="a-case-item"
          v-for="(item,index) in caseList"
          :key="index"
          @click="caseItemClickHandler(item,index)"
        >
          <div class="a-case-item__img">
            <img :src="baseUrl.imgPath + item.img" />
          </div>
          <div class="a-case-item__main">
            <div class="a-case-item__code" @click.stop="showAjInfo(item)">{{item.code}}</div>
            <div class="a-case-item__title">{{item.title}}</div>
            <div class="a-case-item__type">{{item.type}}</div>
            <div class="a-case-item__createDate">{{item.createDate}}</div>
          </div>
          <div>
<!--            <i class="a-case-item__sort-num">{{index+1}}</i>-->
          </div>
        </li>
      </ul>
    </div>
    <div class="a-case-footer mt10">
      <el-pagination
        background
        layout="prev, pager, next"
        small
        :page-size="caseListPageSize"
        :current-page="caseListPageIndex"
        :total="caseListTotal"
        @current-change="paginationChangeHandler"
      ></el-pagination>
    </div>
    <aj-info
            v-model="showInfo"
            :case-code="showAnjianInfo.code"
            :case-id="showAnjianInfo.id"
            :recid="showAnjianInfo.id"
    >
    </aj-info>
  </el-dialog>
  <!-- end 案件列表弹窗 -->
</template>

<script>
/*
   功能模块  案件基本信息
   创建人    zgf
   更新时间  2020/04/14
   备注
*/

import elDragDialog from "@/directive/el-drag-dialog"; // base on element-ui
import AjInfo from '../public/ajInfo'
export default {
  name: "caseList",
  directives: { elDragDialog },
  components: { AjInfo },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    //  {
    //     stage:col,//阶段id（1上报、2立案、3作废、4处置、5核查、6结案）
    //     stageLabel:colName,//阶段label（上报、立案、作废、处置、核查、结案）
    //     areaId:row.id,//某某村的id
    //     areaName:row.cName//某某村名称
    //     sourceId: row.id, //来源的id
    //     sourceName: row.cName //来源名称
    //   }
    caseFilter: {
      type: Object,
      default() {
        return {};
      }
    },
    caseCode: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      showCaseListDialog: false,
      caseList: [],
      caseListTotal: 0, //总页数
      caseListPageSize: 10, //每页显示条数
      caseListPageIndex: 1, //接口开始页是不是从1？
      caseListLoading: false,
      allData: [],
      showAnjianInfo: {},
      showInfo: false,
      firsttime:'',
      lasttime:'',
      sq:'',
      ajzt:'',
      xl: '',
      wtly:'',
      humanname:'',
      humancode:'',
      hcrcode:'',
      rwh:''
    };
  },
  watch: {
    value(newVal) {
      this.showCaseListDialog = newVal;
    },
    showCaseListDialog(newVal) {
      this.$emit("input", newVal);
    },
    caseFilter: {
      deep: true,
      handler(newVal) {
        debugger
        this.allData = []
        let firsttime = newVal.firsttime
        let lasttime = newVal.lasttime
        let sq = ''
        let ajzt = ''
        let xl = ''
        let wtly = ''
        let rwh = ''
        let humanname=''
        let humancode=''
        let hcrcode=''
        this.caseListPageIndex=1;
        let pageNum=1;
        let pageSize=this.caseListPageSize;
        if(newVal.pagename == "AreaDynamicInfo"){
          switch (newVal.stage) {
            case 1:
              sq=newVal.areaName
              ajzt='all'
              break;
            case 2:
              sq=newVal.areaName
              ajzt='las'
              break;
            case 3:
              sq=newVal.areaName
              ajzt='yzf'
              break;
            case 4:
              sq=newVal.areaName
              ajzt='czz'
              break
            case 5:
              sq=newVal.areaName
              ajzt='dbj'
              break
            case 6:
              sq=newVal.areaName
              ajzt='ja'
              break;
            default:
              break;
          }
          this.searchAjxx(ajzt, firsttime, lasttime, rwh, sq, humanname, xl, wtly,pageNum,pageSize)
        }else if(newVal.pagename == 'TypeDynamicInfo'){
          switch (newVal.stage) {
            case 1:
              xl=newVal.areaName
              ajzt='all'
              break;
            case 2:
              xl=newVal.areaName
              ajzt='las'
              break;
            case 3:
              xl=newVal.areaName
              ajzt='yzf'
              break;
            case 4:
              xl=newVal.areaName
              ajzt='czz'
              break
            case 5:
              xl=newVal.areaName
              ajzt='dbj'
              break
            case 6:
              xl=newVal.areaName
               ajzt='ja'
              break;
            default:
              break;
          }
          this.searchAjxx(ajzt, firsttime, lasttime, rwh, sq, humanname, xl, wtly,pageNum,pageSize)
        }else if(newVal.pagename == 'IncidenceDynamicInfo'){
          switch (newVal.stage) {
            case 1:
              xl=newVal.areaName
              ajzt='all'
              break;
            case 2:
              xl=newVal.areaName
              ajzt='las'
              break;
            case 3:
              xl=newVal.areaName
              ajzt='yzf'
              break;
            case 4:
              xl=newVal.areaName
              ajzt='czz'
              break
            case 5:
              xl=newVal.areaName
              ajzt='dbj'
              break
            case 6:
              xl=newVal.areaName
              ajzt='ja'
              break;
            default:
              break;
          }
          this.searchAjxx(ajzt, firsttime, lasttime, rwh, sq, humanname, xl, wtly,pageNum,pageSize)
        }else if(newVal.pagename == 'SourceDynamicInfo'){
          switch (newVal.stage) {
            case 1:
              wtly=newVal.areaName
              ajzt='all'
              break;
            case 2:
              wtly=newVal.areaName
              ajzt='las'
              break;
            case 3:
              wtly=newVal.areaName
              ajzt='yzf'
              break;
            case 4:
              wtly=newVal.areaName
              ajzt='czz'
              break
            case 5:
              wtly=newVal.areaName
              ajzt='dbj'
              break
            case 6:
              wtly=newVal.areaName
              ajzt='ja'
              break;
            default:
              break;
          }
          this.searchAjxx(ajzt, firsttime, lasttime, rwh, sq, humanname, xl, wtly,pageNum,pageSize)
        }else if(newVal.pagename == 'jdysb'){
          humancode=newVal.humancode
          ajzt=''
          this.searchAjxx(ajzt, firsttime, lasttime, rwh, sq, humanname, xl, wtly,pageNum,pageSize,humancode)
          // this.$http.get(this.baseUrl.jdyxxUrl, {
          //   params: {
          //     humancode: newVal.humancode
          //   }
          // }).then((rel)=>{
          //   debugger
          //   this.caseList = []
          //   for(let i=0;i<rel.data.sbajxx.length;i++){
          //     this.allData.push(
          //       {
          //         id: rel.data.sbajxx[i].RECID,
          //         title: rel.data.sbajxx[i].DL,
          //         img: rel.data.sbajxx[i].img["附件"][0].filepath,
          //         code: rel.data.sbajxx[i].RWH,
          //         type: rel.data.sbajxx[i].WTLY,
          //         position: [rel.data.sbajxx[i].X, rel.data.sbajxx[i].Y],
          //         createDate: rel.data.sbajxx[i].SBSJSTR
          //       }
          //     )
          //   }
          //   this.caseListTotal = this.allData.length
          //   this.caseList = this.allData.slice(0, this.caseListPageSize)
          // }).catch((e)=>{
          //   console.log(e)
          // })
        }else if(newVal.pagename == 'jdyhc'){
          hcrcode=newVal.humancode
          humancode=''
          ajzt=''
          this.searchAjxx(ajzt, firsttime, lasttime, rwh, sq, humanname, xl, wtly,pageNum,pageSize,humancode,hcrcode)
          // this.$http.get(this.baseUrl.jdyxxUrl, {
          //   params: {
          //     humancode: newVal.humancode
          //   }
          // }).then((rel)=>{
          //   debugger
          //   this.caseList = []
          //   for(let i=0;i<rel.data.hcajxx.length;i++){
          //     this.allData.push(
          //             {
          //               id: rel.data.hcajxx[i].RECID,
          //               title: rel.data.hcajxx[i].DL,
          //               img: rel.data.hcajxx[i].img["附件"][0].filepath,
          //               code: rel.data.hcajxx[i].RWH,
          //               type: rel.data.hcajxx[i].WTLY,
          //               position: [rel.data.hcajxx[i].X, rel.data.sbajxx[i].Y],
          //               createDate: rel.data.hcajxx[i].SBSJSTR
          //             }
          //     )
          //   }
          //   this.caseListTotal = this.allData.length
          //   this.caseList = this.allData.slice(0, this.caseListPageSize)
          // }).catch((e)=>{
          //   console.log(e)
          // })
          // this.caseList = [
          //   {
          //     id: 380998,
          //     title: '街面秩序',
          //     img: '/ImpDoc/2020/05/13//837BE65E6F7E405F9C236CBC40CA3900_20200513164436_0.jpg',
          //     code: 'ANSB202005130022',
          //     type: '采集员上报',
          //     position: [120.3734000000, 36.1041900000],
          //     createDate: '2020/5/13 16:44:35'
          //   }
          // ]
        }
        this.firsttime = firsttime
        this.lasttime = lasttime
        this.sq = sq
        this.ajzt = ajzt
        this.xl = xl
        this.wtly = wtly
        this.rwh = rwh
        this.humanname=humanname
        this.humancode=humancode
        this.hcrcode=hcrcode
      }
    }
  },
  mounted() {
    this.showCaseListDialog = this.value;
    console.log(this.showCaseListDialog);
  },
  methods: {
    //获取列表数据
    getCaseList() {
      let params = {
        pageIndex: this.caseListPageIndex,
        pageSize: this.caseListPageSize,
        ...this.caseFilter
      };
      console.log(params);
      this.caseListLoading = true;
      setTimeout(() => {
        this.caseListLoading = false;
        //接口获取到的总条数赋值
        this.caseListTotal = 300;
        //给当前获取到页数据赋值
        this.caseList = [
          {
            id: "0001",
            title: "市容环境，乱堆物堆料",
            img:
              "http://221.216.205.222:8081/eUrbanMIS/view/mediadl/media/getdata/Media2/rec/20200426/22409/d2b8ff39-2df2-4194-b7d0-bc88d89f3a36/egova_102176_297e60400eb9b70a46f61d0892a28f8e.jpg",
            code: "202004120003",
            type: "信息采集员上传",
            position: [108.529042, 40.272524],
            createDate: "2020/04/12 08:40:01"
          },
          {
            id: "0002",
            title: "市容环境乱晒衣服",
            img:
              "http://221.216.205.222:8081/eUrbanMIS/view/mediadl/media/getdata/Media2/rec/20200426/22409/d2b8ff39-2df2-4194-b7d0-bc88d89f3a36/egova_102176_297e60400eb9b70a46f61d0892a28f8e.jpg",
            code: "202004120003",
            type: "信息采集员上传",
            position: [122.547597, 41.369921],
            createDate: "2020/04/12 08:40:01"
          },
          {
            id: "0003",
            title: "市容环境，乱堆物堆料",
            img:
              "http://221.216.205.222:8081/eUrbanMIS/view/mediadl/media/getdata/Media2/rec/20200426/22409/d2b8ff39-2df2-4194-b7d0-bc88d89f3a36/egova_102176_297e60400eb9b70a46f61d0892a28f8e.jpg",
            code: "202004120003",
            type: "信息采集员上传",
            position: [116.922597, 38.127337],
            createDate: "2020/04/12 08:40:01"
          },
          {
            id: "0004",
            title: "市容环境，乱堆物堆料",
            img:
              "http://221.216.205.222:8081/eUrbanMIS/view/mediadl/media/getdata/Media2/rec/20200426/22409/d2b8ff39-2df2-4194-b7d0-bc88d89f3a36/egova_102176_297e60400eb9b70a46f61d0892a28f8e.jpg",
            code: "202004120003",
            position: [127.95287, 35.703385],
            createDate: "2020/04/12 08:40:01"
          },
          {
            id: "0005",
            title: "市容环境，乱堆物堆料",
            img:
              "http://221.216.205.222:8081/eUrbanMIS/view/mediadl/media/getdata/Media2/rec/20200426/22409/d2b8ff39-2df2-4194-b7d0-bc88d89f3a36/egova_102176_297e60400eb9b70a46f61d0892a28f8e.jpg",
            code: "202004120003",
            type: "信息采集员上传",
            position: [115.867909, 33.093057],
            createDate: "2020/04/12 08:40:01"
          },
          {
            id: "0006",
            title: "市容环境，乱堆物堆料",
            img:
              "http://221.216.205.222:8081/eUrbanMIS/view/mediadl/media/getdata/Media2/rec/20200426/22409/d2b8ff39-2df2-4194-b7d0-bc88d89f3a36/egova_102176_297e60400eb9b70a46f61d0892a28f8e.jpg",
            code: "202004120003",
            type: "信息采集员上传",
            position: [109.100331, 34.697948],
            createDate: "2020/04/12 08:40:01"
          },
          {
            id: "0007",
            title: "市容环境，乱堆物堆料",
            img:
              "http://221.216.205.222:8081/eUrbanMIS/view/mediadl/media/getdata/Media2/rec/20200426/22409/d2b8ff39-2df2-4194-b7d0-bc88d89f3a36/egova_102176_297e60400eb9b70a46f61d0892a28f8e.jpg",
            code: "202004120003",
            position: [117.230214, 43.126363],
            createDate: "2020/04/12 08:40:01"
          },
          {
            id: "0008",
            title: "市容环境，乱堆物堆料",
            img:
              "http://221.216.205.222:8081/eUrbanMIS/view/mediadl/media/getdata/Media2/rec/20200426/22409/d2b8ff39-2df2-4194-b7d0-bc88d89f3a36/egova_102176_297e60400eb9b70a46f61d0892a28f8e.jpg",
            code: "202004120003",
            type: "信息采集员上传",
            position: [111.649159, 38.058166],
            createDate: "2020/04/12 08:40:01"
          },
          {
            id: "0009",
            title: "市容环境，乱堆物堆料",
            img:
              "http://221.216.205.222:8081/eUrbanMIS/view/mediadl/media/getdata/Media2/rec/20200426/22409/d2b8ff39-2df2-4194-b7d0-bc88d89f3a36/egova_102176_297e60400eb9b70a46f61d0892a28f8e.jpg",
            code: "202004120003",
            type: "信息采集员上传",
            position: [108.485097, 35.810371],
            createDate: "2020/04/12 08:40:01"
          },
          {
            id: "0010",
            title: "市容环境，乱堆物堆料",
            img:
              "http://221.216.205.222:8081/eUrbanMIS/view/mediadl/media/getdata/Media2/rec/20200426/22409/d2b8ff39-2df2-4194-b7d0-bc88d89f3a36/egova_102176_297e60400eb9b70a46f61d0892a28f8e.jpg",
            code: "202004120003",
            type: "信息采集员上传",
            position: [123.646229, 41.960835],
            createDate: "2020/04/12 08:40:01"
          }
        ];
        this.$nextTick(() => {
          this.$emit("list-ready", this.caseList);
        });
      }, 1000);
    },
    //事件点击
    caseItemClickHandler(item, index) {
      this.$emit("case-click", item, index);
    },
    //切换分页时
    paginationChangeHandler(pageIndex) {
      this.caseListPageIndex = pageIndex;
      // this.caseList = this.allData.slice((pageIndex-1)*this.caseListPageSize, pageIndex*this.caseListPageSize);
      this.caseListLoading = true
      this.searchAjxx(this.ajzt, this.firsttime, this.lasttime, this.rwh, this.sq, this.humanname, this.xl, this.wtly,pageIndex,this.caseListPageSize,this.humancode,this.hcrcode);
      // this.getCaseList();
    },
    //查询案件列表
    searchAjxx(ajzt, firsttime, lasttime, rwh, sq, humanname, xl, wtly,pageNum,pageSize,humancode,hcrcode){
      debugger
      this.caseListLoading = true
      this.$http.get(this.baseUrl.searchAllUrl, {
        params: {
          pageNum:pageNum,
          pageSize:pageSize,
          ajzt: ajzt,
          firsttime: firsttime,
          lasttime: lasttime,
          rwh: rwh,
          sq: sq,
          humanname: humanname,
          humancode: humancode,
          hcrcode:hcrcode,
          xl: xl,
          wtly: wtly
        }
      }).then((rel)=>{
        debugger
        this.allData = rel.data.list.list
        // let caseListPageSize = this.caseListPageSize
        // this.caseList = rel.data.tjcx.slice(0, caseListPageSize)
        this.caseList =this.allData;
        this.showFilterBody = false;
        this.caseListLoading = false;
        //接口获取到的总条数赋值
        this.caseListTotal =rel.data.list.totalSize
        let juheArrs = []
        for (let j in this.allData) {
          let item = this.allData[j];
          juheArrs.push(
            new AMap.Marker({
              position: [item.position[0], item.position[1]],
              content: '<div style="background-color: hsla(180, 100%, 50%, 0.7); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>',
              offset: new AMap.Pixel(-15, -15)
            })
          )
          //this.addMarkerGroupToMap(item);
        }
        this.$emit('juhe',juheArrs)
        // this.getCaseList();
      }).catch((e)=>{
        this.caseListLoading = false;
        console.log(e)
      })
    },
    //点击事件显示详情，带办理过程
    showAjInfo(item){
      this.showAnjianInfo = item;
      this.showInfo = true
    },
  }
};
</script>

<style lang="less" scoped>
@import "../../css/mixin.less";
.a-case-list {
  margin: 0;
  padding: 0;
  list-style: none;
  padding-top: 0.5rem;
  min-height: 100px;
  height: calc(100vh - 16rem);
  overflow-y: auto;
  margin-bottom: 50px;
  .nativeScroll();
  .a-case-item {
    display: flex;
    padding: 0.5rem;
    line-height: 1.4em;
    align-items: center;
    border-bottom: dotted 1px #3d3db6;
    box-sizing: border-box;
    cursor: pointer;
    &:hover {
      background-color: #130a6b;
    }
    &__img {
      width: 5rem;
      height: 4rem;
      margin-right: 0.75rem;
      img {
        width: 100%;
        height: 4rem;
        object-fit: cover;
        border-radius: 0.2rem;
      }
    }
    &__main {
      flex: 1;
      margin-right: 0.75rem;
    }
    &__code {
      font-size: 0.6rem;
      color: #fff;
    }
    &__title {
      font-size: 0.8rem;
      counter-reset: #fff;
      font-weight: bold;
    }
    &__type {
      font-size: 0.65rem;
      color: #f7b500;
    }
    &__createDate {
      font-size: 0.6rem;
      color: #b2bcff;
      opacity: 0.5;
    }
    &__sort-num {
      width: 1.5rem;
      height: 1.5rem;
      background-color: #f3b200;
      color: midnightblue;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 5rem;
      font-weight: bold;
    }
  }
}
.a-case-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
}
</style>
